<template>
  <div class="add_address">
    <div class="font_size28 color_99 p_r30 p_l30 p_t20">绑上须知：添加银行卡时,姓名和身份证需与首次绑卡填写信息一致</div>
    <div class="bg_colorff m_t20 p_r30 p_l30">
      <div class="flex border_b p_r30 line90 font_size32 color_33">
        <div class="lable">姓名</div>
        <div><input v-model="username" class="font_size32" type="text" maxlength="10" placeholder="输入持卡人姓名"/></div>
      </div>
      <div class="flex border_b p_r30 line90 font_size32 color_33">
        <div class="lable">身份证号</div>
        <div><input v-model="cordnum" class="font_size32" type="text"  placeholder="输入身份证号"/></div>
      </div>
      <div class="flex border_b line90 font_size32 ">
        <div class="flex-1 color_33">银行卡</div>
        <div class="color_99" @click="shoubanklistFn"><span v-if="!band_name">选择银行卡类型</span><span v-if="band_name">{{band_name}}</span><img class="left_icon" src="../../assets/img/icon/jiantou_left.png"/></div>
      </div>
      <div class="flex p_r30 line90 font_size32 color_33">
        <div class="lable">银行卡号</div>
        <div><input v-model="band_cordnum" class="font_size32" type="number"  placeholder="输入等待卡号"/></div>
      </div>

      <!--<popup v-model="regionVisible" position="bottom" class="region-popup" style="width: 100%">-->
        <!--<div class="title flex border_b p_r30 p_l30 line90">-->
          <!--<div class="font_size28 color_0d " @click="cancalFn(1)" >取消</div>-->
          <!--<div class="font_size32 color_33 flex-1 t_center">选择银行卡</div>-->
          <!--<div class="font_size28 color_0d  t_right" @click="cancalFn(2)">确定</div>-->
        <!--</div>-->
        <!--<picker :slots="slots" valueKey="name"  className="color_0d"  @change="onValuesChange" :itemHeight="40"></picker>-->
      <!--</popup>-->
      <div v-if="regionVisible">
        <bank-list></bank-list>
      </div>

    </div>

    <div class="p_l30 p_r30"><div class="infokeepbtn" @click="keepFn">保存</div></div>
  </div>
</template>

<script>
  import { Picker } from 'mint-ui';
  import { Popup } from 'mint-ui';
  import BankList from '../../components/public/BankList';
  export default {
    name: "addcord",
    data(){
      return{
        username: '',
        cordnum: '',
        cord_type: '',
        band_cordnum: '',
        // band_id: '',
        // band_name: '',
        banklist: [],
        regionVisible: false,
        slots: [
          {
            flex: 1,
            values: [],  //省份数组
            className: 'slot1',
            textAlign: 'center',
          }
        ],
      }
    },
    components: {
      Picker,
      Popup,
      BankList,
    },
    computed: {
      band_id(){
        return this.$store.state.bank_id
      },
      band_name(){
        return this.$store.state.bank_name
      },
    },
    created(){
      this.getbankList()
    },
    beforeRouteLeave(to, from, next) {
      if(to.fullPath == '/cordlist'){
        this.$store.commit('setbankname', '')
        this.$store.commit('setbankid', '')
      }
      next();
    },
    methods: {
      getbankList(){
        this.$util.get('user/bankList',{
          uid: this.$store.state.userinfo.uid
        }).then(data => {
          if(data.status == 1){
            this.slots[0].values = data.data
          }
        })
      },
      shoubanklistFn(){
        this.regionVisible = !this.regionVisible
      },
      onValuesChange(picker, values) {
        console.log(values)
        if(this.regionVisible){
          this.band_name = values[0].name
          this.band_id = values[0].id
        }
      },
      cancalFn(type){
        this.regionVisible = !this.regionVisible
        if(type == 1){
          this.band_name = ''
          this.band_id = ''
        }
      },
      keepFn(){
        var self = this
        if(!self.username){
          this.$toast('请输入用户名')
          return
        }
        if(!self.cordnum){
          this.$toast('请输入身份证号')
          return
        }
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if(!reg.test(self.cordnum)) {
          this.$toast("身份证输入不合法")
          return
        }
        if(!self.band_id){
          this.$toast('请选择银行')
          return
        }
        if(!self.band_cordnum){
          this.$toast('请输入银行卡号')
          return
        }
        // var pattern = /^([1-9]{1})(\d{14}|\d{18})$/;
        // if(!pattern.test(self.band_cordnum)) {
        //   this.$toast("请输入正确的银行卡卡号")
        //   return
        // }
        this.$util.post('user/userAddBankCard',{
          uid: this.$store.state.userinfo.uid,
          real_name: self.username,
          id_card_number: self.cordnum,
          bank_id: self.band_id,
          card_number: self.band_cordnum,
        }).then(data => {
          if(data.status == 1){
            self.band_id = ''
            self.band_name = ''
            this.$toast('添加成功')
          } else {
            this.$toast(data.message)
          }
        })

      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../../assets/css/public.less";
  @import "../../assets/css/center/addaddress";
  .infokeepbtn{
    width: 100%;
    height: 94px;
    line-height: 94px;
    border-radius: 50px;
    background-color: #0dd13b;
    color: white;
    text-align: center;
    margin-top:100px;
  }
</style>
